import Taro, {Component} from '@tarojs/taro'
import {Text, View} from '@tarojs/components'

export default class Xhl5 extends Component {
  config = {
    navigationBarTitleText: '条件渲染'
  }

  static defaultProps = {
    isLoggedIn: false
  }

  render() {
    const isLoggedIn = this.props.isLoggedIn
    const loadingStatus = 'loading'
    // 这里最好初始化声明为 `null`，初始化又不赋值的话
    // 小程序可能会报警为变量为 undefined
    let status = null
    if (isLoggedIn) {
      status = <Text>已登录</Text>
    } else {
      status = <Text>未登录</Text>
    }
    return (
      <View>
        <View>1. 你可以使用变量来储存元素</View>
        <View>{status}</View>
        <View>2. 更简洁的语法，逻辑运算符 &&</View>
        <View>
          {isLoggedIn && <Text>已登录</Text>}
          {!isLoggedIn && <Text>未登录</Text>}
        </View>
        <View>3. 三元运算符（条件表达式）</View>
        <View>
          {isLoggedIn
            ? <Text>已登录</Text>
            : <Text>未登录</Text>
          }
        </View>
        <View>4. 枚举条件渲染</View>
        <View className='loading-status'>
          {
            {
              'loading': 'loading',
              'fail': 'fail',
              'no-more': '没有更多了'
            }[loadingStatus] /** loadingStatus 是 `loading`、`fail`、`no-more`  其中一种状态 **/
          }
        </View>
      </View>
    )
  }
}
